<template>
  <div>
    <div class="goods-size-price-content font-bold">
      <div class="weight">
        <template v-if="weightType === 'goods'">
          {{$t('商品实重或体积重')}}
        </template>
        <template v-else-if="weightType === 'box'">
          {{$t('每箱实重或体积重')}}
        </template>
      </div>
      <div class="cal-type">
        {{$t('计费方式')}}
        <el-tooltip placement="top">
          <template #content >
            <div class="mgb10">
              <span>{{ $t('计费方式（数量）')}}：</span><br>
              <span>{{ $t('重量范围内，按订单中每个商品的重量（体积重）及数量计费') }}</span><br>
              <span>{{ $t('例：一个订单中4个商品，2个5kg，2个3kg，则收费：5kg首+5kg续+3kg续+3kg续') }}</span>
            </div>

            <div class="mgb10">
              <span>{{ $t('计费方式（重量）') }}：</span><br>
              <span>{{ $t('重量范围内，按订单中每个商品的首重（首KG）和续重（续KG）计费，不足1kg按1kg计算') }}</span><br>
              <span>{{ $t('此时页面上的首件（pcs）、续件（pcs）实为：首KG、续KG') }}</span>
              <span>{{ $t('例：一个订单中2个商品均为 10.6kg，则收费：1KG价+21（10.6*2-1，进一）*续KG价') }}</span>
            </div>

            <div >
              {{ $t('综合订单按各自重量范围计费，最重者为首件（首重）：1KG价+续KG*续KG价+5kg续pcs+5kg续pcs') }}
            </div>
          </template>
          <i class="el-icon-question font-blue"></i>
        </el-tooltip>
      </div>
      <div class="PSC-first">{{ $t('setting.首件（pcs）') }}</div>
      <div class="PSC-append">{{ $t('setting.续件（pcs）') }}</div>
    </div>
    <div
      class="goods-size-price-content"
      v-for="(item,index) in goodsSizeStickerPrice"
      :key="'goodsSize' + index"
    >
      <div class="weight">
        ≥
        <el-input-number
          v-model="item.weight"
          :min="0"
          :precision="2"
          controls-position="right"
          :disabled="index === 0"
        ></el-input-number>
        kg
      </div>
      <div class="cal-type">
        <el-switch
          class="price-type-switch"
          v-model="item.type"
          active-value="num"
          inactive-value="weight"
          active-color="#13ce66"
          inactive-color="#ff8000"
          :active-text="$t('数量')"
          :inactive-text="$t('重量')"
          @change="changeValue()"
        >
        </el-switch>
      </div>
      <div class="PSC-first">
        <template v-if="item.type === 'num'">
          <el-input-number
            v-model="item.PSCFirst"
            :min="0"
            :precision="2"
            @change="changeValue()"
          ></el-input-number>
          {{$t('common.RMB')}}
        </template>
        <template v-else-if="item.type === 'weight'">
          <el-input-number
            v-model="item.weightFirst"
            :min="0"
            :precision="2"
            @change="changeValue()"
          ></el-input-number>
          {{$t('common.RMB')}}/KG
        </template>

      </div>
      <div class="PSC-append">
        <template v-if="item.type === 'num'">
          <el-input-number
            v-model="item.PSCAppend"
            :min="0"
            :precision="2"
            @change="changeValue()"
          ></el-input-number>
          {{$t('common.RMB')}}
        </template>
        <template v-else-if="item.type === 'weight'">
          <el-input-number
            v-model="item.weightAppend"
            :min="0"
            :precision="2"
            @change="changeValue()"
          ></el-input-number>
          {{$t('common.RMB')}}/KG
        </template>
      </div>

      <div class="remove-item">
        <template v-if="index === 0">
          <span class="font-red">({{$t('userInfo.default')}})</span>
        </template>
        <template v-else>
          <el-button style="padding: 2px" type="danger" size="small" icon="el-icon-minus" circle @click="removeGoodsSizePrice(goodsSizeStickerPrice,index);changeValue()"></el-button>
        </template>
      </div>

    </div>
    <div class="mgt20">
      <el-button icon="el-icon-plus" type="primary" @click="addGoodsSizePrice(goodsSizeStickerPrice);changeValue()">{{ $t('setting.添加更多重量范围') }}</el-button>
    </div>
  </div>

</template>

<script>
import goodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";

export default {
  name: "GoodsSizePrice",
  mixins: [goodsSizePriceMixin],
  props: {
    goodsSizeStickerPrice: {
      // type: Array,
      // required: true,
    },
    weightType: {
      type: String,
      default: 'goods', // 单个商品为goods 箱为box
    },
  },
  methods: {
    changeValue(){
      this.$emit('changeValue')
    }
  },
}
</script>

<style>
.price-type-switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.price-type-switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.price-type-switch .el-switch__label--right span {
  margin-left: 9px;
}

/*关闭时文字位置设置*/
.price-type-switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.price-type-switch .el-switch__label--left span {
  margin-left: 22px;
}

/*显示文字*/
.price-type-switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
.price-type-switch.el-switch .el-switch__core,
.cal-type .el-switch .el-switch__label {
  width: 60px !important;
  margin: 0;
}
</style>

<style scoped lang="scss">
.goods-size-price-content{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  align-items: center;
  justify-content: flex-start;
  .weight{
    width: 220px;
  }
  .cal-type{
    width: 180px;
  }
  .PSC-first{
    width: 200px;
  }
  .PSC-append{
    width: 200px;
  }
  .remove-item{
    width: 50px;
  }
}
</style>
